<template>
    <div class="import_user">
        <ul class="userlest_box">
            <li class="userlest" v-for="user in users" :key="user.id">
                <img :src="user.figure || 'https://cdn.hbjxqp.happypoker.cn/static/img/avatar.png'" alt="头像">
                <p>{{user.nick}}</p>
                <span>{{user.id}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      whiteListType: 1 //1:白名单 2:黑名单
    };
  },
  components: {},
  created() {
    //初始化数据
    this.getClubList();
  },
  methods: {
    getClubList() {
      this.apiService.club
        .clubuserlist({
          clubid: this.$route.query.clubId,
          whitelisttype: this.whiteListType
        })
        .then(res => {
          this.users = res.data.clubuserlist;
        });
    }
  }
};
</script>

<style scoped>
.userlest_box {
  padding: 0.25rem 0.6rem;
  width: 100%;
  height: 80vh;
  overflow: auto;
}
.userlest {
  font-size: 0.3rem;
  width: 21%;
  float: left;
  overflow: hidden;
  height: 20%;
  margin: 2%;
  text-align: center;
}
.userlest img {
  height: 0.9rem;
  width: 0.9rem;
  border-radius: 6px;
}
.userlest p {
  font-size: 0.2rem;
  padding: 0 0.15rem;
  margin-top: 0.1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
.userlest span {
  font-size: 0.2rem;
}
</style>


